<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 2. 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main" style="width: 750px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script>
  // 1.导入echarts
  import echarts from 'echarts'
  export default {
    data(){
      return {

      }
    },
    methods: {

    },
    created(){

    },
    mounted(){
      // 3.初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'))

      // 4.准备数据
      let option = {
        title: {
          text: 'echart 入门'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['寸衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5,20,36,10,10,20]
          }
        ]
      }

      // 5.将数据挂载到echarts
      myChart.setOption(option)
    }
  }
</script>

<style scoped>

</style>
